/*
 * Create:      柿子
 * CreateDate:  2023/11/02
 * Describe：   床位图 - 新版床位图
 * */
import React, { Component } from 'react';
import { Menu, Dropdown, Icon, Input, Tree, Select, Button, Radio, Card } from 'antd';
import store from 'store';
import BedItem from './component/BedItem';
import ScrollList from './component/ScrollList'; // 效果类似antd中的tabs
import Memorandum from './component/Memorandum'; // 备忘录

const { Search } = Input;
const { TreeNode } = Tree;

class BedBitmapContainer extends Component {
  constructor(props) {
    super(props);
    const userData = React.$getSessionData();
    let operationalData = React.$getLocalStorageData('BedBitmapContainer');
    this.state = {
      userData,
      currentLocMenu: {
        locID: userData?.locID || '',
        locDesc: userData?.locDesc || '',
      },
      careLevelList: [{
        id: '1',
        title: '特级护理',
        color: '#ee49b3',
      }, {
        id: '2',
        title: '一级护理',
        color: '#e81010',
      }, {
        id: '3',
        title: '二级护理',
        color: '#188df4',
      }, {
        id: '4',
        title: '三级护理',
        color: '#07cd9e',
      }],
      leftNum: 200,
      leftMinLimit: 100,
      leftMaxLimit: 200,
      rightNum: 200,
      rightMinLimit: 100,
      rightMaxLimit: 200,
      waitRoom: [], // 等候区
      waitExpandedKeys: [],
      waitSelectedKeys: [],
      waitRightMenuRecord: {},
      waitRightMenuVisible: false,
      bedFilterID: '', // 床位图
      bedFilterData: [{
        title: '不限',
        id: ''
      }, {
        title: '已用',
        count: 12,
        id: '1'
      }, {
        title: '空床',
        count: 20,
        id: '2'
      }, {
        title: '新入院',
        count: 10,
        id: '3'
      }, {
        title: '新医嘱',
        count: 8,
        id: '4'
      }, {
        title: '停医嘱',
        count: 0,
        id: '5'
      }, {
        title: '一级护理',
        count: 12,
        id: '6'
      }, {
        title: '二级护理',
        count: 10,
        id: '7'
      }, {
        title: '三级护理',
        count: 9,
        id: '8'
      }, {
        title: '特级护理1',
        count: 6,
        id: '9'
      }],
      bedOtherFilterData: [], // 床位其他过滤节点
      floorID: undefined, // 楼层
      floorData: [{ id: '1', descripts: '一楼' }, { id: '2', descripts: '二楼' }, { id: '3', descripts: '三楼' }],
      bedModeID: '1', // 床位展示模式
      bedModeData: [{
        key: '1',
        title: '详情',
      }, {
        key: '2',
        title: '二维码',
      }, {
        key: '3',
        title: '简要',
      }],
      startMouseY: null,
      topCardHeight: store.getState().tableHeight.y - 15 + 'px',
      bottomCardHeight: 200,
      wardInfoData: [], // 病区信息
      wardInfoExpandedKeys: [],
      wardInfoSelectKeys: [],
      wardInfoRightMenuRecord: {},
      wardInfoRightMenuVisible: {},
      memoDataFlag: 'Y', // 备忘录数据标志 - 备忘录列表是否有数据
      defaultNumBeds: 6, // 每行默认的床位个数
      bedList: [], // 床位数据
      bedRecordData: {}, // 床位图选中数据
      ...operationalData
    };
    this.isResizing = false;
    this.resizePosition = null;
    this.BBCContainer = React.createRef(); // 创建 Ref
    this.BBCTopCardRef = React.createRef();
    this.BBCBottomCardRef = React.createRef();
    this.BBCRightBodyRef = React.createRef();
  };

  componentDidMount() {
    this.getWaitRoom();
    this.getWardInfo();
    this.getBedList();
    this.handleCalculativeWidth();
    document.addEventListener('mousemove', this.handleVResizeOver);
    document.addEventListener('mouseup', this.handleStopResize);
    document.addEventListener('click', this.handleOverallClick)
  };

  componentWillUnmount() {
    document.removeEventListener('mousemove', this.handleVResizeOver);
    document.removeEventListener('mouseup', this.handleStopResize);
    document.removeEventListener('click', this.handleOverallClick)
  };

  // 根据界面大小计算床位图及等候区宽度
  handleCalculativeWidth = () => {
    const { operationInnerWidth } = this.state;
    let innerWidth = window.innerWidth;
    if (operationInnerWidth === innerWidth) return; // 相同尺寸下不执行默认操作
    let defaultNumBeds = Math.ceil(parseInt((innerWidth - 246 - 58) / 256));
    let defaultBedsWidth = 246 * defaultNumBeds + 10 * (defaultNumBeds - 1) + 58;
    let otherWidth = (innerWidth - defaultBedsWidth) / 2;
    this.setState({ leftNum: otherWidth, rightNum: otherWidth, defaultNumBeds });
  };

  // 只要鼠标松开或者离开区域，那么就停止resize
  handleStopResize = (e) => {
    e.preventDefault();
    React.$stopPropagation(e);
    if (this.isResizing) {
      delete (this.resizePosition);
      this.isResizing = false;
      this.setState({});
    }
  };

  // 拖动垂直调整块
  handleVResizeOver = (e) => {
    if (!this.isResizing) return;
    const { leftMinLimit, leftMaxLimit, rightMinLimit, rightMaxLimit, startMouseY } = this.state;
    // 使用 offsetX 调整新值
    let newValue;
    if (this.resizePosition === 'left') {
      newValue = Math.max(leftMinLimit, Math.min(leftMaxLimit, e.clientX - this.BBCContainer.current.offsetLeft - this.offsetXLeft));
      this.setState({ leftNum: newValue }, () => {
        this.handleRecordOperationalData();
      });
    } else if (this.resizePosition === 'right') {
      newValue = Math.max(rightMinLimit, Math.min(rightMaxLimit, this.BBCContainer.current.offsetWidth - e.clientX + this.BBCContainer.current.offsetLeft));
      this.setState({ rightNum: newValue }, () => {
        this.handleRecordOperationalData();
      });
    } else if (this.resizePosition === 'top') {
      let deltaY = e.clientY - startMouseY;
      const minHeightVal = 42;
      const maxHeightVal = this.BBCRightBodyRef?.current?.offsetHeight - 48;
      const topCardHeight =
        `${Math.max(minHeightVal,
          Math.min(maxHeightVal,
            parseInt(this.BBCTopCardRef.current?.style?.height) + deltaY))}px`;
      // 应用新 height 到 DOM 元素.
      this.BBCTopCardRef.current.style.height = topCardHeight;
      const bottomCardHeight =
        `${this.BBCRightBodyRef.current.offsetHeight - parseInt(this.BBCTopCardRef.current.style.height) - 6}`;
      this.BBCBottomCardRef.current.style.height = bottomCardHeight + 'px';
      this.setState({
        startMouseY: e.clientY,
        topCardHeight,
        bottomCardHeight
      }, () => {
        this.handleRecordOperationalData();
      });
    }
  };

  // 记录操作数据
  handleRecordOperationalData = () => {
    const { leftNum, rightNum, topCardHeight, bottomCardHeight, defaultNumBeds } = this.state;
    React.$setLocalStorageData('BedBitmapContainer', {
      operationInnerWidth: window.innerWidth, // 操作标志
      defaultNumBeds, // 默认一行的床位数
      leftNum,
      rightNum,
      topCardHeight,
      bottomCardHeight
    });
  };

  // 上下拖拽
  handleHResizeDown = (e, direction) => {
    e.preventDefault();
    if (!this.isResizing) {
      this.isResizing = true;
      this.resizePosition = direction;
      // 使用 offsetHeight 来获取元素当前完整高度
      this.setState({
        startMouseY: e.clientY,
      })
    }
  };

  // 开始拖动垂直调整块
  handleVResizeDown = (e, direction) => {
    e.preventDefault();
    React.$stopPropagation(e);
    if (!this.isResizing) {
      this.isResizing = true;
      this.resizePosition = direction;
      // 计算鼠标指针和被点击元素左边界之间的距离（偏移量）
      const rect = e.target.getBoundingClientRect();
      if (this.resizePosition === 'left') {
        this.offsetXLeft = e.clientX - rect.left;
      } else if (this.resizePosition === 'right') {
        this.offsetXRight = rect.right - e.clientX;
      }
    }
  };

  // 监听界面点击事件清除右键菜单相关数据
  handleOverallClick = () => {
    const { waitRightMenuVisible, wardInfoRightMenuVisible } = this.state;
    if (waitRightMenuVisible) {
      this.state.waitRightMenuVisible = false;
      this.state.waitRightMenuRecord = {};
    }
    if (wardInfoRightMenuVisible) {
      this.state.wardInfoRightMenuVisible = false;
      this.state.wardInfoRightMenuRecord = {};
    }
    if (waitRightMenuVisible || wardInfoRightMenuVisible) {
      this.setState({});
    }
  };

  // 科室切换
  handleLocMenuChange = (item) => {
    this.setState({ currentLocMenu: item });
  };

  // 查询
  handleQuery = () => {
    console.log('触发了')
  };

  // 获取
  getWaitRoom = () => {
    try {
      const waitRoom = [{
        title: '等候区',
        count: 4,
        key: '1',
        children: [{
          key: '1-1',
          patName: '刘备',
          sexDesc: '男',
          age: '45岁',
          title: '刘备/男/45岁',
        }, {
          key: '1-2',
          patName: '曹孟德',
          sexDesc: '男',
          age: '67岁',
          title: '曹孟德/男/67岁'
        }, {
          key: '1-3',
          patName: '貂蝉',
          sexDesc: '女',
          age: '18岁',
          title: '貂蝉/女/18岁'
        }, {
          key: '1-4',
          patName: '小乔',
          sexDesc: '女',
          age: '25岁',
          title: '小乔/女/25岁'
        }]
      }, {
        title: '转入区',
        count: 1,
        key: '2',
        children: [{
          key: '2-1',
          patName: '张飞',
          sexDesc: '男',
          age: '36岁',
          title: '张飞/男/36岁'
        }]
      }, {
        key: '3',
        title: '转出区',
        count: 3,
        children: [{
          key: '3-1',
          patName: '周瑜',
          sexDesc: '男',
          age: '25岁',
          title: '周瑜/男/25岁'
        }]
      }, {
        key: '4',
        title: '医疗结算区',
        count: 1,
        children: [{
          key: '4-1',
          patName: '典韦',
          sexDesc: '男',
          age: '65岁',
          title: '典韦/男/65岁'
        }]
      }, {
        key: '5',
        title: '护士结算',
        count: 0,
        children: []
      }];
      let waitTitleCount = waitRoom && waitRoom.reduce((max, item) => {
        return item?.title?.length > max ? item.title.length : max;
      }, 0);
      this.setState({ waitRoom, waitExpandedKeys: ['1'], leftMinLimit: 108 + (waitTitleCount - 4) * 15 });
    } catch (error) {
      console.log(error);
    }
  };

  // 获取tree渲染数据
  renderTreeNodes = (data, selectable = false, className) => {
    const { waitRightMenuRecord } = this.state;
    return data.map(item => {
      if (item.children && item.children.length) {
        return (
          <TreeNode
            key={item.key}
            title={(
              <div onClick={() => this.handleWaitExpand(item.key, 'node')}>
                <span>{item.title + (item && 'count' in item ? '(' + item.count + ')' : '')}</span>
              </div>
            )}
            selectable={false}
            dataRef={item}
          >
            {this.renderTreeNodes(item.children, true, className)}
          </TreeNode>
        );
      }
      return <TreeNode
        key={item.key}
        title={item.title}
        dataRef={item}
        selectable={selectable}
        className={[waitRightMenuRecord?.key === item.key ? 'bbc-right-menu-select' : '', item && 'count' in item ? '' : (className || 'bbc-tree-child-nodes')].join(' ')}
      />;
    });
  };

  handleWaitExpand = (keys, type) => {
    let currentKey = [];
    if (type === 'node') {
      let { waitExpandedKeys } = this.state;
      if (waitExpandedKeys.indexOf(keys) < 0) {
        currentKey.push(keys);
      }
    } else {
      currentKey.push(keys[keys.length - 1]);
    }
    this.setState({
      waitExpandedKeys: currentKey,
    });
  };

  handleWaitSelect = (selectedKeys, info) => {
    this.setState({ waitSelectedKeys: selectedKeys });
  };

  // 患者病历右键
  handleTreeRightClick = ({ event, node }, rowDataDataIndex, visibleDataIndex) => {
    let record = node.props && node.props.dataRef ? node.props.dataRef : {};
    if (!(record && 'count' in record && record.count)) {
      this.handleContextMenu(record, event, rowDataDataIndex, visibleDataIndex);
    }
  };

  // 右键菜单事件
  handleContextMenu = (record, event, rowDataDataIndex, visibleDataIndex) => {
    if (this.root)
      event.preventDefault();
    this.state[rowDataDataIndex] = record;
    this.state[visibleDataIndex] = true;
    this.setState({});
    const clickX = event.clientX;
    const clickY = event.clientY;
    // 获取自定义菜单的宽度/高度
    const rootW = this.root.offsetWidth;
    const rootH = this.root.offsetHeight;
    this.root.style.left = window.innerWidth - clickX > rootW ? `${clickX}px` : `${clickX - rootW}px`;
    this.root.style.top = window.innerHeight - clickY > rootH ? `${clickY + 12}px` : `${clickY - rootH}px`;
  };

  handleInputChange = (e, dataIndex, isQuery) => {
    this.state[dataIndex] = e;
    this.setState({}, () => {
      isQuery === 'Y' && this.handleQuery();
    })
  };

  // 获取病区信息
  getWardInfo = () => {
    try {
      const wardInfoData = [{
        title: '皮试',
        count: 4,
        key: '1',
        children: [{
          key: '1-1',
          patName: '刘备',
          sexDesc: '男',
          age: '45岁',
          title: '刘备/男/45岁',
        }, {
          key: '1-2',
          patName: '曹孟德',
          sexDesc: '男',
          age: '67岁',
          title: '曹孟德/男/67岁'
        }, {
          key: '1-3',
          patName: '貂蝉',
          sexDesc: '女',
          age: '18岁',
          title: '貂蝉/女/18岁'
        }, {
          key: '1-4',
          patName: '小乔',
          sexDesc: '女',
          age: '25岁',
          title: '小乔/女/25岁'
        }]
      }, {
        title: '测血糖',
        count: 1,
        key: '2',
        children: [{
          key: '2-1',
          patName: '张飞',
          sexDesc: '男',
          age: '36岁',
          title: '张飞/男/36岁'
        }]
      }, {
        key: '3',
        title: '测血压',
        count: 3,
        children: [{
          key: '3-1',
          patName: '周瑜',
          sexDesc: '男',
          age: '25岁',
          title: '周瑜/男/25岁'
        }]
      }, {
        key: '4',
        title: '卧位',
        count: 1,
        children: [{
          key: '4-1',
          patName: '典韦',
          sexDesc: '男',
          age: '65岁',
          title: '典韦/男/65岁'
        }]
      }, {
        key: '5',
        title: '测视力',
        count: 0,
        children: []
      }];
      let wardInfoTitleCount = wardInfoData && wardInfoData.reduce((max, item) => {
        return item?.title?.length > max ? item.title.length : max;
      }, 0);
      this.setState({ wardInfoData, wardInfoExpandedKeys: ['1'], rightMinLimit: 108 + (wardInfoTitleCount - 4) * 15 });
    } catch (error) {
      console.log(error);
    }
  };

  handleWardInfoExpand = (keys) => {
    this.setState({
      wardInfoExpandedKeys: keys,
    });
  };

  handleWardInfoSelect = (selectedKeys, info) => {
    this.setState({ wardInfoSelectKeys: selectedKeys });
  };

  // 添加备忘录
  handleAddMemo = () => {
    this.memoRef && this.memoRef.modifyVisible(true);
  };

  // 获取床位图数据
  getBedList = () => {
    let bedItem = {
      roomDescripts: '一病室',
      bedCode: '601',
      patName: '窦后田',
      patNo: '0000740775',
      admDateTime: '2023-11-12 09:51:43',
      admDiag: '1.葡萄膜炎[色素膜炎](双眼);2.白内障(双眼);3.葡萄膜炎[色素膜炎](双眼);4.黄斑水肿(双眼);5.老年性白内障(双眼)',
      admReasonDesc: '六安市-(城乡居民基本医疗保险)',
      patMedicalNo: '03000808',
      admNurDesc: '刘慧娟',
      admDocDesc: '张婉',
      patSexDesc: '男',
      patAge: '40岁',
      admInDays: '0',
      headerIcon: [{
        key: 1,
        iconDesc: '新入院患者',
        color: '#00ffff',
        range: '',
        title: '入',
        displayMethod: '',
        showFlag: 'N'
      }, {
        key: 2,
        iconDesc: '今日手术',
        color: '#00ffff',
        range: '',
        title: '术',
        displayMethod: '',
        showFlag: 'N'
      }, {
        key: 3,
        iconDesc: '今日出院',
        color: '#00ffff',
        range: '',
        title: '出',
        displayMethod: '',
        showFlag: 'N'
      }]
    }
    let bedList = [];
    for (let i = 0; i < 20; i++) {
      bedList.push({
        ...bedItem,
        id: i + 1,
        roomDescripts: i % 2 === 1 ? '一栋三楼一病室' : bedItem.roomDescripts,
        patSexDesc: i % 2 === 1 ? '男' : '女',
        patName: i === 0 ? '曹操' : i % 2 === 0 ? '帕坦慕 · 土尔地热赫赫曼巴' : bedItem?.patName,
        bedCode: i % 2 === 1 ? i + 1 : parseInt(bedItem?.bedCode || 0) + i,
        patNo: parseInt(bedItem?.patNo || 0) + 10 + i,
        patMedicalNo: parseInt(bedItem?.patMedicalNo || 0) + 50 + i,
        headerBg: i % 3 === 0 ? '#188df4' : (i % 3 === 1 ? '#f759ab' : (i % 3 === 2 ? '#07cd9e' : '')),
        headerIcon: i === 1 ? [{
          key: 1,
          iconDesc: '新入院患者',
          color: '#00ffff',
          range: '',
          title: '入',
          displayMethod: '',
          showFlag: 'N'
        }] : i === 2 ? [...bedItem?.headerIcon, {
          key: 6,
          iconDesc: '今日手术',
          color: '#00ffff',
          range: '',
          title: '术',
          displayMethod: '',
          showFlag: 'N'
        },] : i === 4 ? [{
          key: 1,
          iconDesc: '新入院患者',
          color: '#00ffff',
          range: '',
          title: '入',
          displayMethod: '',
          showFlag: 'N'
        }, {
          key: 2,
          iconDesc: '今日手术',
          color: '#00ffff',
          range: '',
          title: '术',
          displayMethod: '',
          showFlag: 'N'
        }] : i % 2 === 0 ? [...bedItem?.headerIcon, {
          key: 13,
          iconDesc: '今日手术',
          color: '#00ffff',
          range: '',
          title: '术',
          displayMethod: '',
          showFlag: 'N'
        }, {
          key: 14,
          iconDesc: '今日出院',
          color: '#00ffff',
          range: '',
          title: '出',
          displayMethod: '',
          showFlag: 'N'
        }, {
          key: 5,
          iconDesc: '今日手术',
          color: '#00ffff',
          range: '',
          title: '术',
          displayMethod: '',
          showFlag: 'N'
        }, {
          key: 6,
          iconDesc: '今日出院',
          color: '#00ffff',
          range: '',
          title: '出',
          displayMethod: '',
          showFlag: 'N'
        }, {
          key: 7,
          iconDesc: '今日手术',
          color: '#00ffff',
          range: '',
          title: '术',
          displayMethod: '',
          showFlag: 'N'
        }, {
          key: 8,
          iconDesc: '今日出院',
          color: '#00ffff',
          range: '',
          title: '出',
          displayMethod: '',
          showFlag: 'N'
        }] : bedItem?.headerIcon,
      })
    }
    this.setState({ bedList });
  };

  // 获取备忘录数据
  getMemoDataFlag = (memoDataFlag) => {
    this.setState({ memoDataFlag });
  };

  // 床位图单击事件
  handleBedItemClick = (e, record) => {
    React.$stopPropagation(e);
    const { bedRecordData } = this.state;
    console.log('record', record)
    if (bedRecordData?.id === record?.id) {
      this.setState({ bedRecordData: {} });
    } else {
      this.setState({ bedRecordData: record });
    }
  };

  render() {
    const { currentLocMenu, careLevelList, loading, leftNum, rightNum, waitRoom, waitExpandedKeys, waitSelectedKeys, waitRightMenuVisible, bedFilterData, bedFilterID, floorData, floorID, bedModeData, bedModeID,
      bedOtherFilterData, topCardHeight, bottomCardHeight, wardInfoData, wardInfoExpandedKeys, wardInfoSelectKeys, memoDataFlag, bedList, defaultNumBeds, bedRecordData
    } = this.state;
    const locMenuList = (
      <Menu>
        <Menu.Item onClick={() => this.handleLocMenuChange({ locDesc: '一病区' })}>
          <span>
            一病区
          </span>
        </Menu.Item>
        <Menu.Item onClick={() => this.handleLocMenuChange({ locDesc: '二病区' })}>
          <span>
            二病区
          </span>
        </Menu.Item>
        <Menu.Item onClick={() => this.handleLocMenuChange({ locDesc: '屈光眼病专科' })}>
          <span>
            屈光眼病专科
          </span>
        </Menu.Item>
      </Menu>
    );
    const careLevelWidth = 85 * (careLevelList?.length || 0); // 护理级别宽度
    const vCursor = this.isResizing ? 'e-resize' : 'default';
    const hCursor = this.isResizing ? 'n-resize' : 'default';

    return (
      <div className="nurse-station-common bed-bitmap-container">
        <div className="bbc-header flex-between-center">
          <div style={{ width: '120px' }}>
            <Dropdown overlay={locMenuList}>
              <span style={{ cursor: 'pointer', fontSize: '15px' }}>
                {currentLocMenu?.locDesc} <Icon type="down" />
              </span>
            </Dropdown>
          </div>
          <div
            style={{ width: `calc(100% - ${(careLevelWidth + 120 + 'px')})` }}
            className="bbc-header-body flex-center"
          >
            <Search
              loading={loading}
              placeholder="床号/住院号/姓名/病人ID"
              style={{ width: '28%', marginRight: '20px' }}
              onSearch={this.handleQuery}
              onPressEnter={this.handleQuery}
            />
            <div className="bbc-header-body-title">
              <span>
                今日入院：
                <strong className="common-number">10</strong>
                人
              </span>
              <span>
                今日出院：
                <strong className="common-number">10</strong>
                人</span>
              <span>
                今日结账：
                <strong className="common-number">10</strong>
                人</span>
              <span>
                今日手术：
                <strong className="common-number">10</strong>
                人
              </span>
            </div>
          </div>
          <div style={{ width: careLevelWidth + 'px' }} className="bbc-care-level flex-align-items">
            {careLevelList && careLevelList.map((item, index) => {
              return (
                <span key={index} className="bbc-care-level-item flex-align-items">
                  <i className="bbc-record-color-notes" style={{ background: item?.color || '' }}></i>
                  {item?.title || ''}
                </span>
              )
            })}
          </div>
        </div>
        <div className="bbc-content">
          <div
            className="bbc-content-body"
          >
            <div
              className="flex"
              style={{ width: '100%', height: '100%' }}
              ref={this.BBCContainer} // 使用 Ref
              onMouseUp={this.handleStopResize}
              onMouseLeave={this.handleStopResize}
            >
              <div
                style={{
                  width: leftNum,
                  cursor: vCursor,
                  height: '100%',
                }}
              >
                <div className="bbc-content-body-left bbc-tree scroll-bar-style">
                  <Tree
                    blockNode
                    expandedKeys={waitExpandedKeys}
                    selectedKeys={waitSelectedKeys}
                    onExpand={this.handleWaitExpand}
                    onSelect={this.handleWaitSelect}
                    onRightClick={(e) => this.handleTreeRightClick(e, 'waitRightMenuRecord', 'waitRightMenuVisible')}
                  >
                    {this.renderTreeNodes(waitRoom, false, 'bbc-tree-child-nodes')}
                  </Tree>
                </div>
              </div>
              <div
                draggable={false}
                className="common-v-resize"
                onMouseDown={(e) => this.handleVResizeDown(e, 'left')}
              >
                <div className={this.isResizing && this.resizePosition === 'left' ? 'common-v-resize-hover' : ''}></div>
              </div>
              <div
                style={{ width: `calc(100% - ${leftNum + rightNum + 12 + 'px'})`, cursor: vCursor, height: '100%' }}
              >
                <div className="bbc-content-body-center">
                  <div className="bbc-bed-filter">
                    <div className="bbc-bed-filter-item flex-between-center">
                      <div style={{ width: 'calc(100% - 274px)' }}>
                        <ScrollList>
                          {bedFilterData && bedFilterData.map((item, index) => {
                            return (
                              <Button
                                size="small"
                                key={index}
                                ghost={bedFilterID === item.id ? true : false}
                                type={bedFilterID === item.id ? 'primary' : 'default'}
                              >
                                {item.title + (item && 'count' in item ? ('(' + item.count + ')') : '')}
                              </Button>
                            )
                          })}
                        </ScrollList>
                      </div>
                      <div style={{ width: '274px' }} className="flex-align-items">
                        <Select
                          allowClear
                          showSearch
                          style={{ width: '76px', marginRight: '4px' }}
                          value={floorID}
                          placeholder="楼层"
                          optionFilterProp="search"
                          onChange={(e) => this.handleInputChange(e, 'floorID', 'Y')}
                        >
                          {React.$SelectOptions(floorData)}
                        </Select>
                        <Radio.Group
                          buttonStyle="solid"
                          value={bedModeID}
                          onChange={(e) => this.handleInputChange(e.target.value, 'bedModeID', 'Y')}
                        >
                          {bedModeData && bedModeData.map((item, index) => {
                            return (
                              <Radio.Button key={item.key} value={item.key}>{item?.title || '-'}</Radio.Button>
                            )
                          })}
                        </Radio.Group>
                      </div>
                    </div>
                    <div style={{ display: bedOtherFilterData && bedOtherFilterData.length > 0 ? '' : 'none' }} className="bbc-bed-filter-item bbc-bed-other-filter">
                      <ScrollList>
                        {bedOtherFilterData && bedOtherFilterData.map((item, index) => {
                          return (
                            <Button
                              size="small"
                              key={index}
                              ghost={bedFilterID === item.id ? true : false}
                              type={bedFilterID === item.id ? 'primary' : 'default'}
                            >
                              {item.title + (item && 'count' in item ? ('(' + item.count + ')') : '')}
                            </Button>
                          )
                        })}
                      </ScrollList>
                    </div>
                  </div>
                  <div style={{ height: `calc(100% - ${bedOtherFilterData && bedOtherFilterData.length > 0 ? 82 : 50}px)` }} className="bbc-bed-list">
                    <div className={['bbc-bed-list-body', 'scroll-bar-style flex-wrap'].join(' ')}>
                      {bedList && bedList.map((item, index) => {
                        return (
                          <div className={['bbc-bed-list-item', ('bbc-beds-row-' + defaultNumBeds)].join(' ')} key={index}>
                            <BedItem
                              bedInfo={item}
                              rowData={bedRecordData}
                              onClick={(e) => this.handleBedItemClick(e, item, index)}
                            />
                          </div>
                        )
                      })}
                    </div>
                  </div>
                </div>
              </div>
              <div
                draggable={false}
                className="common-v-resize"
                onMouseDown={(e) => this.handleVResizeDown(e, 'right')}
              >
                <div className={this.isResizing && this.resizePosition === 'right' ? 'common-v-resize-hover' : ''}></div>
              </div>
              <div
                style={{
                  width: rightNum,
                  cursor: hCursor,
                  height: '100%',
                }}
              >
                <div className="bbc-content-body-right" ref={this.BBCRightBodyRef}>
                  <div style={{ height: topCardHeight }} ref={this.BBCTopCardRef}>
                    <Card
                      size="small"
                      bordered={false}
                      title={(
                        <div className="flex-align-items">
                          <i style={{ color: '#33cccc' }} className="iconfont icon-ward-info bbc-card-icon"></i>
                          {rightNum < 100 ? '信息' : '病区信息'}
                        </div>
                      )}
                      bodyStyle={{ height: '100%', padding: '4px 6px 6px' }}
                    >
                      <div style={{ height: 'calc(100% - 43px)', overflow: 'auto' }} className="bbc-tree scroll-bar-style">
                        <Tree
                          blockNode
                          expandedKeys={wardInfoExpandedKeys}
                          selectedKeys={wardInfoSelectKeys}
                          onExpand={this.handleWardInfoExpand}
                          onSelect={this.handleWardInfoSelect}
                          onRightClick={(e) => this.handleTreeRightClick(e, 'wardInfoRightMenuRecord', 'wardInfoRightMenuVisible')}
                        >
                          {this.renderTreeNodes(wardInfoData, false, 'bbc-ward-info-tree-child-nodes')}
                        </Tree>
                      </div>
                    </Card>
                  </div>
                  <div
                    draggable={false}
                    className="common-h-resize"
                    onMouseDown={(e) => this.handleHResizeDown(e, 'top')}
                  >
                    <div></div>
                  </div>
                  <div style={{ height: bottomCardHeight + 'px' }} ref={this.BBCBottomCardRef}>
                    <Card
                      size="small"
                      bordered={false}
                      bodyStyle={{ padding: memoDataFlag === 'Y' ? '6px 6px 6px 12px' : 0 }}
                      title={(
                        <div className="flex-align-items">
                          <i style={{ color: '#fcc446' }} className="iconfont icon-memorandum bbc-card-icon"></i>
                          {rightNum < 100 ? '' : '备忘录'}
                        </div>
                      )}
                      extra={(
                        <span className="span" onClick={this.handleAddMemo}>
                          <Icon type="plus" style={{ fontSize: '12px' }} />
                          添加
                        </span>
                      )}
                    >
                      <div style={{ height: bottomCardHeight - 56 + 'px', overflow: 'auto', paddingRight: memoDataFlag === 'Y' ? '6px' : 0 }} className="scroll-bar-style">
                        <Memorandum onRef={ref => this.memoRef = ref} updateMemoDataFlag={this.getMemoDataFlag} />
                      </div>
                    </Card>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* componentSource -- 组件来源 */}
        <div ref={(ref) => { this.root = ref }} className="common-right-menu-wrap" style={{ visibility: waitRightMenuVisible ? 'visible' : 'hidden' }}>
          <div className="common-right-menu-option">
            操作1
          </div>
          <div className="common-right-menu-option">
            操作2
          </div>
          <div className="common-right-menu-option">
            操作3
          </div>
        </div>
      </div>
    );
  }
}

export default BedBitmapContainer;